<template>
	<view>
		<uni-ec-canvas class="uni-ec-canvas" id="line-chart" canvas-id="multi-charts-line" :ec="ec"></uni-ec-canvas>
	</view>
</template>

<script>
	import uniEcCanvas from "@/components/uni-ec-canvas/uni-ec-canvas";
	export default {
		data() {
			return {
				ec: {
					option: {
						"tooltip": {
							"trigger": "axis"
						},
						"title": {
							"show": false,
							"text": "SH"
						},
						"legend": {
							"orient": "horizontal",
							"bottom": "0",
							"type": "scroll"
						},
						"grid": {
							"left": "0%",
							"right": "0%",
							"bottom": "10%",
							"top": "5%",
							"containLabel": true
						},
						"xAxis": {
							"type": "category",
							"data": ['17:25','17:30','17:35','17:40','17:45','17:50','17:55',],
							"splitLine": {
								"show": true,
								"lineStyle": {
									"type": "dotted",
									"color": "#999"
								}
							},
							"axisTick": {
								"show": false
							},
							"axisLabel": {
								"show": true
							}
						},
						"yAxis": {
							"type": "value",
							"splitLine": {
								"show": true,
								"lineStyle": {
									"type": "dotted",
									"color": "#999"
								}
							}
						},
						series: [{
							name: "温度",
							type: "line",
							symbol: "none",
							symbolSize: 0,
							smooth: true,
							lineStyle: {
								width: 2,
								color: "#007AFF",
							},
							areaStyle: {
								color: {
									type: "linear",
									x: 0,
									y: 0,
									x2: 0,
									y2: 1,
									colorStops: [{
											offset: 0,
											color: "rgba(0,122,255, 0.8)",
										},
										{
											offset: 1,
											color: "rgba(0,122,255, 0.1)",
										},
									],
								},
							},
							data: [16.6, 15.8, 17.1, 18.9, 15.2, 16.1, 17.8]
						}]
					}
				},
			};
		},
		onReady() {
			// setTimeout(() => {
			// 	this.ec.option.series[0].data = [1, 2, 3, 4, 5, 6, 7];
			// 	console.log("折线图数据改变啦");
			// }, 1000);
		},
		components: {
			uniEcCanvas
		}
	};
</script>

<style scoped>
	.uni-ec-canvas {
		height: 500rpx;
	    display: block;
	    padding: 20rpx 40rpx;
	    margin: 40rpx 40rpx 40rpx 40rpx;
	    border-radius: 16rpx;
	    background: rgba(255, 255, 255, 1);
	    border: 1px solid rgba(255, 255, 255, 1);
	}
</style>